<template>
	<div class="land">
		<h1 class="title">费用详情</h1>
		<div class="maps">
			<div class="last">
				<p>2017年8月30日 19:45-22:43</p>
				<p>行驶xx公里，用时45分钟</p>
			</div>
		</div>
		<div class="costDetail">
			<div class="bg">
				<span class="liston"></span>
				<span class="listtw">费用详情</span>
				<span class="listth"></span>
			</div>
			<ul class="list">
				<li><span class="left">起步价</span><span class="right">xx元</span></li>
				<li><span class="left">里程费（xx公里）</span><span class="right">xx元</span></li>
				<li><span class="left">远途费</span><span class="right">xx元</span></li>
				<li><span class="left">低速费</span><span class="right">xx元</span></li>
			</ul>
		</div>
		<div class="total">
			<p>总计：<span>xx元</span></p>
		</div>
		<div class="pay">
			<div class="bg">
				<span class="liston"></span>
				<span class="listtw">支付方式</span>
				<span class="listth"></span>
			</div>
			<div class="img">
				<div class="tp"><img src="../assets/images/weixin.png"></div>
				<p>微信</p>
			</div>
			<a class="buy" @click="test">立即支付</a>
      		<a class="WechatPay" @click="WechatPay">WechatPay</a>
		</div>
	</div>
</template>

<script>
// 引入这个页面需要的方法
import {mapGetters} from 'vuex'
import {addOrder, wechatPay} from 'api/api'
import axios from 'axios'

export default {
  computed: {
    ...mapGetters([
      'w'
    ])
  },
  methods: {
    // 微信支付
    WechatPay () {
      let orderId = localStorage.getItem('orderId')
      axios.post(wechatPay, {
        'param': {
          'fields': {
            'orderId': orderId
          }
        }
      }).then((res) => {
        console.log(res)
      })
    },
    // 下单 -- 测试
    test () {
      // 使用测试数据的情况还有订单仍然在进行
      axios.post(addOrder, {
        'param': {
          'fields': {
            'carType': this.carType,
            'customerPhone': this.orderPhone,
            'customerName': this.orderName,
            'desAddress': this.destination,
            'desLocation': '114.356898:30.551858',
            'flightId': '',
            'orderType': 1,
            'passengerId': 11,
            'startAddress': this.searchBoxInfo,
            'startLocation': '114.220266:30.78087',
            'planTime': '',
            'useSeats': 2,
            'canWait': 1,
            'token': '11111'
          }
        }
      }).then((res) => {
        console.log(res)
        localStorage.setItem('orderId', res.data.result.id)
        localStorage.setItem('orderNum', res.data.result.id)
      })
    }
  }
}	
</script>

<style lang="stylus" scoped>
	.land {
		padding 0 1rem
	}
	
	.title {
		font-family: PingFang-SC-Medium; 
		font-size:1.2rem; 
		font-weight: normal; 
		font-stretch: normal; 
		line-height: 4rem; 
		letter-spacing: 0rem; 
		color: #333333; 
		text-align: center;
	}
	.maps{
		height:9.25rem;
		position: relative;
		background: #ccc;
		border: 2px solid rgb(210,210,210);
	}
	.maps .last{
		position: absolute;
		bottom:0;
		height:3.125rem;
		width:100%;
		background:#616364;
		padding:5px 0;
	}
	.maps .last p{
		color:#fff;
		text-align: center;
		line-height: 1.5rem;
	}
	.costDetail{
		margin-top:1.5rem ;
	}
	.costDetail .bg{
		overflow: hidden;
	}
	.costDetail .bg span{
		float: left;
	}
	.costDetail .bg span.liston{
		width:40%;
		height:1px;
		margin-top:0.5rem;
		border-top:1px solid rgb(204,204,204);
		
	}
	.costDetail .bg span.listtw{
		width:20%;
		color:rgb(153,153,153);
	}
	.costDetail .bg span.listth{
		width:40%;
		height:1px;
		margin-top:0.5rem;
		border-top:1px solid rgb(204,204,204);
	}
	.list{
		margin-top:1rem;
		padding-bottom: 2rem;
		border-bottom: 1px solid rgb(204,204,204);
	}
	.list li{
		line-height: 2rem;
		overflow: hidden;
		color:rgb(153,153,153);
	}
	.list li span.left{
		float: left;
		text-indent: 2rem;
	}
	.list li span.right{
		float: right;
		margin-right:2rem;
	}
	.total{
		height:4.8rem;
	}
	.total p{
		float: right;
		margin-right:1rem;
		line-height: 2.5rem;
		color:rgb(51,51,51);
	}
	.pay .bg{
		overflow: hidden;
	}
	.pay .bg span{
		float: left;
	}
	.pay .bg span.liston{
		width:40%;
		height:1px;
		margin-top:0.5rem;
		border-top:1px solid rgb(204,204,204);
		
	}
	.pay .bg span.listtw{
		width:20%;
		color:rgb(153,153,153);
	}
	.pay .bg span.listth{
		width:40%;
		height:1px;
		margin-top:0.5rem;
		border-top:1px solid rgb(204,204,204);
	}
	.img .tp{
		margin-top:1.5rem;
	}
	.img .tp img{
		width:2.5rem;
		height:2.5rem;
	}
	.img p{
		line-height:2rem;
		color:rgb(153,153,153);
	}
	.buy{
		display: block;
		height:3.125rem;
		background:rgb(255,36,36);
		border-radius: 5px;
		color:#fff;
		line-height:3.125rem;
	}
</style>